<template>
    <div class="position">
        <!-- 联系客服 -->
        <div class="Service" @click="Service">联系客服</div>
        <!-- 加入购物车 -->
        <div class="shopcar" @click="addShopCar">加入购物车</div>
        <!-- 立即购买 -->
        <div class="BuyNOW" @click="BuyNOW">立即购买</div>
    </div>
</template>
<script setup>
// 定义参数 Or 变量
const emit = defineEmits(["addShopCar", "BuyNOW", "Service"])
/**
 * 加入购物车事件
 */
const addShopCar = () => {
    emit("addShopCar")
}
/**
 * 立即购买事件
 */
const BuyNOW = () => {
    emit("BuyNOW")
}
/**
 * 联系客服
 */
const Service = () => {
    emit("Service")
}
</script>
<style lang="scss">
.position {
    position: fixed;
    bottom: 0;
    height: 45px;
    width: 100%;
    background: #fff;
    font-size: clamp(0.98rem, 0.489rem + 1.1vw, 1.4rem);
    display: flex;
    justify-content: space-between;
}

.Service {
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.BuyNOW {
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FF6666;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.shopcar {
    width: 39.5%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FF6666;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
</style>